<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>标题内容</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="obj.title" type="text" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.style.fontFamily" placeholder="设置字体" size="mini" style="width:190px;">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in fontFamilys"
                            :key="index" />
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>样式</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.style.fontSize" class="miniinput" min="12" />

                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.style.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.style, 'fontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.style.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.style, 'fontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>颜色</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.colorType" size="mini">
                        <el-radio-button label="single">单色</el-radio-button>
                        <el-radio-button label="gradient">渐变色</el-radio-button>
                    </el-radio-group>
                    <br>
                    <div v-if="obj.colorType == 'gradient'">
                        <Gradient v-model="obj.gradient"></Gradient>
                        <!-- <el-color-picker v-model="obj.style.colorStart" size="small" show-alpha :predefine="predefineColors"
                            popper-class="mycolorview" @active-change="setColorChange(obj.style, 'colorStart', $event)" />
                        <el-color-picker v-model="obj.style.colorEnd" size="small" show-alpha :predefine="predefineColors"
                            popper-class="mycolorview" @active-change="setColorChange(obj.style, 'colorEnd', $event)" />
                        <el-slider v-model="obj.style.fontAngle" :min="0" :max="360"
                            style="width:90px;display: inline-block;vertical-align: middle;padding-left: 20px;"></el-slider> -->
                    </div>
                    <el-color-picker v-else v-model="obj.style.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.style, 'color', $event)" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>布局</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <p class="linetext">排列方式</p>
                    <el-radio-group v-model="obj.isShupai" size="mini">
                        <el-radio-button :label="true">垂直</el-radio-button>
                        <el-radio-button :label="false">水平</el-radio-button>
                    </el-radio-group>
                    <p class="linetext2">对齐方式</p>
                    <div class="flex">
                        <div :class="flexstyle('flex-start')" @click="setjustifyContent('flex-start')">
                            <i class="iconfont icon-zuoduiqi"></i>
                        </div>
                        <div :class="flexstyle('center')" @click="setjustifyContent('center')">
                            <i class="iconfont icon-shuipingjuzhongduiqi"></i>
                        </div>
                        <div :class="flexstyle('flex-end')" @click="setjustifyContent('flex-end')">
                            <i class="iconfont icon-youduiqi"></i>
                        </div>
                    </div>
                    <p class="linetext"></p>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>字间距</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.style.letterSpacing" type="number" style="width:180px;" />
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="事件">
            <event-form :obj="obj" />
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: "SingleTextForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
        setFontStyle: Function,
        flexstyle: Function,
        setjustifyContent: Function,
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        EventForm: () => import('../mixin/EventForm.vue'),
        Gradient: () => import('@/components/Gradient/index.vue')
    },
    computed: {
        ...mapGetters(['fontFamilys'])
    },
    model: {
        prop: "obj",
        event: "change",
    },
}
</script>

<style>
.linetext {
    font-size: 12px;
    color: #a8a8a8;
    line-height: normal;
    padding-top: 15px;
}

.linetext2 {
    font-size: 12px;
    color: #a8a8a8;
    line-height: normal;
    padding-bottom: 5px;
}
</style>